<template>
	<div id="app">
		<el-container style="height: 100%; border: 1px solid #eee">
			<el-aside width="200px">
				<el-menu :default-openeds="['1']" @select="get" default-active="1" class="el-menu-vertical-demo"
					:collapse="isCollapse">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-message"></i>导航一</template>
						<el-menu-item index="/test/textNext">
							<!-- <router-link to="/test/textNext">文档1</router-link> -->
							文档1
						</el-menu-item>
						<el-menu-item index="/test/textNextTwo">
							<!-- <router-link to="/test/textNextTwo">文档2</router-link> -->
							文档2
						</el-menu-item>
						<el-menu-item index="1-3">选项3</el-menu-item>
						<el-submenu index="1-4">
							<template slot="title">选项4</template>
							<el-menu-item index="1-4-1">选项4-1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-submenu index="2">
						<template slot="title"><i class="el-icon-menu"></i>导航二</template>
						<el-menu-item index="2-1">选项1</el-menu-item>
						<el-menu-item index="2-2">选项2</el-menu-item>
						<el-menu-item index="2-3">选项3</el-menu-item>
						<el-submenu index="2-4">
							<template slot="title">选项4</template>
							<el-menu-item index="2-4-1">选项4-1</el-menu-item>
						</el-submenu>
					</el-submenu>
					<el-submenu index="3">
						<template slot="title"><i class="el-icon-setting"></i>导航三</template>
						<el-menu-item-group>
							<template slot="title">分组一</template>
							<el-menu-item index="3-1">选项1</el-menu-item>
							<el-menu-item index="3-2">选项2</el-menu-item>
						</el-menu-item-group>
						<el-menu-item-group title="分组2">
							<el-menu-item index="3-3">选项3</el-menu-item>
						</el-menu-item-group>
						<el-submenu index="3-4">
							<template slot="title">选项4</template>
							<el-menu-item index="3-4-1">选项4-1</el-menu-item>
						</el-submenu>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="font-size: 16px;display: flex;justify-content: space-between;background-color: #fff;">
					<!-- <el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>查看</el-dropdown-item>
							<el-dropdown-item>新增</el-dropdown-item>
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown> -->
					<el-breadcrumb separator=">" style="display: flex;align-items: center;">
						<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: item.path }" v-for="(item, index) in pathList">
							{{ item.meta.title }}
						</el-breadcrumb-item>
					</el-breadcrumb>
					<button @click="isCollapse = false">展开</button>
					<!-- <button @click="isCollapse=true">折叠</button> -->
					<button @click="stop">停止接收</button>
				</el-header>

				<el-main>
					<!-- <el-table :data="tableData">
						<el-table-column prop="date" label="日期" width="140">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="120">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
					</el-table> -->
					<div class="chat" v-show="show">
						<i class="el-icon-error" @click="show = false"></i>
						<div class="left">
							<div v-for="(item, index) in chatList" :key="index" class="chatList"
								@click="selectChat(item.chatId, index, item.msg)" :class="cur == index ? 'active' : ''">
								<div>
									<img :src="item.avatar" alt="" width="42px" height="42px">
								</div>
								<div>
									<div>{{ item.name }}</div>
									<div>{{ item.msg }}</div>
								</div>
								<div>{{ item.time }}</div>
								<div class="unread" v-show="item.unread && item.unread != 0">{{ item.unread }}</div>
							</div>
						</div>
						<div class="right">
							<div class="top" ref="top">
								<div class="msgList" v-for="(item, index) in msgList" :key="index"
									:class="item.from == 'he' ? '' : 'goRight'">
									<img :src="item.avatar" alt="" width="42px" height="42px"
										v-show="item.from == 'he'">
									<div>
										<div :style="{ textAlign: item.from == 'me' ? 'right' : '' }">{{ item.name }}
										</div>
										<div>{{ item.msg }}</div>
										<div :style="{ textAlign: item.from == 'me' ? 'right' : '' }">{{ item.time }}
										</div>
									</div>
									<img :src="item.avatar" alt="" width="42px" height="42px"
										v-show="item.from != 'he'">
								</div>
							</div>
							<div class="down">
								<div>
									<textarea cols="50" rows="10" @keyup.enter="beforeSendMsg" v-model="text"
										style="border: 0;font-size: 14px;" :disabled="!chatId"></textarea>
								</div>
								<!-- <button @click="beforeSendMsg" :disabled="!chatId" :style="{backgroundColor:chatId ? '':'#ddd',cursor:chatId ?'':'not-allowed'}">发送</button> -->
								<button @click="testMessageReceived()">测试</button>
								<!-- <button @click="testInfo">接收</button> -->
								<!-- <button @click="read">indexed</button> -->
							</div>
						</div>
					</div>
					<router-view />
				</el-main>
				<el-footer>
					<div style="position: fixed;bottom: 20px;right: 20px;cursor: pointer;" @click="show = true">
						<img src="../assets/icon-customer.png" alt="">
					</div>
				</el-footer>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import db_config from "../utils/db_config.js"
	import {
		login
	} from "../api/test.js"
	import {
		getLocal,
		setLocal
	} from "../utils/storage.js"

	export default {
		data() {
			return {
				loading: true,
				page: 1,
				show: false,
				ws: "",
				count: 1,
				isExist: false,
				chatId: "",
				unread: 0,
				timer: "",
				cur: 0.1,
				tableData: [],
				pathList: [],
				isCollapse: false,
				windowWidth: document.body.clientWidth, //视窗宽度
				im: {},
				stompClient: {},
				text: "",
				chatList: [],
				msgList: [],
				indexedDB: ""
			}
		},
		created() {
			this.goLogin()
			this.getRouter()
			this.initWs()
			this.initDB()
		},
		mounted() {
			// const _this = this
			// //监听窗口变化
			// window.onresize = () => {
			// 	return (() => {
			// 		window.windowWidth = document.body.clientWidth
			// 		_this.windowWidth = window.windowWidth
			// 	})()
			// }
			this.getChatList()
		},
		watch: {
			//建立WS重连机制
			//监听对象某个属性
			// 'stompClient.connected'(newValue, oldValue) {
			// 	console.log("连接状态", newValue)
			// 	if (newValue == false) {
			// 		this.timer = setInterval(() => {
			// 			console.log("重新连接", this.stompClient.connected);
			// 			this.initWs()
			// 		}, 5000)
			// 	} else {
			// 		console.log("连接成功");
			// 		clearInterval(this.timer)
			// 	}
			// },
			// windowWidth: {
			// 	//监听对象属性变化
			// 	handler: function () {
			// 		if (this.windowWidth <= 300) {
			// 			this.isCollapse = true
			// 		} else {
			// 			this.isCollapse = false
			// 		}
			// 	},
			// 	deep: true //深层次监听，对象任意属性变化都触发
			// },
			$route(newValue, oldValue) {
				if (newValue) {
					this.getRouter()
				}
			}
		},
		beforeUpdate() {
			this.observeChatScroll()
		},
		methods: {
			getTime() {
				let time = new Date()
				return time.getTime()
			},
			observeChatScroll() {
				let chatBox = this.$refs.top
				chatBox.addEventListener('scroll', (e) => {
					//滑到顶部时触发下次数据加载
					if (e.target.scrollTop == 0) {
						if (this.loading) {
							e.target.scrollTop = 200
							this.page++
							this.cursorGetDataByIndexAndPage(this.page)
						}
					}
				});
			},
			cursorGetDataByIndexAndPage(page) {
				const _this = this
				let pageSize = 10
				let list = [];
				let counter = 0; // 计数器
				let advanced = true; // 是否跳过多少条查询
				var tx = _this.db.transaction(['message']);
				let store = tx.objectStore('message');
				console.log(_this.getTime());
				var request = store
					.index("chatId") // 索引对象
					.openCursor(IDBKeyRange.only(_this.chatId), 'prev'); // 指针对象(倒序搜索)
				request.onsuccess = function(e) {
					console.log(_this.getTime());
					var cursor = e.target.result;
					if (page > 1 && advanced) {
						advanced = false;
						cursor.advance((page - 1) * pageSize); // 跳过多少条
						return;
					}
					if (cursor) {
						// 必须要检查
						list.push(cursor.value);
						counter++;
						if (counter < pageSize) {
							cursor.continue(); // 遍历了存储对象中的所有内容
						} else {
							cursor = null;
							let newList = list.reverse()
							if (_this.msgList.length == 0) {
								_this.msgList = [...newList]
							} else {
								_this.msgList = [...newList, ..._this.msgList]
							}
							if (page == 1) {
								_this.loading = true
								_this.$nextTick(function() {
									_this.$refs.top.scrollTop = 999999999;
								});
							}
							console.log("分页查询结果1", list);
						}
					} else {
						_this.msgList = [...list.reverse(), ..._this.msgList]
						_this.$nextTick(function() {
							_this.$refs.top.scrollTop = 200;
						});
						console.log("分页查询结果2", list);
						_this.loading = false
					}
				};
				request.onerror = function(e) {};
			},
			initDB() {
				this.$Idb(db_config).then(im => {
					this.im = im
				})
				let request = indexedDB.open('im');

				// err
				request.onerror = event => {
					console.log('数据库打开/创建报错', event)
				}

				//如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。
				//升级后自动触发success
				request.onupgradeneeded = event => {
					let db = event.target.result;
					this.db = db;
					//建表 名为person,主键为id
					let store = db.createObjectStore('message', {
						keyPath: 'id',
						autoIncrement: true
					});
					//新建索引名称、索引所在的属性、配置对象（说明该属性是否允许有重复的值）
					store.createIndex('id', 'id', {
						unique: true,
					});
					store.createIndex('chatId', 'chatId', {
						unique: false
					});
					store.createIndex('avatar', 'avatar', {
						unique: false
					});
					store.createIndex('time', 'time', {
						unique: false
					});
					store.createIndex('name', 'name', {
						unique: false
					});
					store.createIndex('msg', 'msg', {
						unique: false
					});
					store.createIndex('from', 'from', {
						unique: false
					});
					store.createIndex('seqId', 'seqId', {
						unique: false
					});

					console.log('数据库升级')
				}

				// success
				request.onsuccess = event => {
					this.db = event.target.result;
					console.log('数据库打开/创建成功', event)
				}
			},
			getChatList() {
				// let arr=[
				// 	{
				// 		chatId: "f6542aa6a27dbd05487e9cbe",
				// 		avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/avatar/2023216/app-sVEPKqtwrPfh.jpg",
				// 		time: "2023/2/24",
				// 		name: "demo",
				// 		msg: "阿瓦噶",
				// 		unread:0
				// 	},
				// 	{
				// 		chatId: "dadgawawawawawawfa",
				// 		avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/app/avatar/default.png",
				// 		time: "2023/2/24",
				// 		name: "demo2",
				// 		msg: "噶违规经营",
				// 		unread:0
				// 	},
				// 	]
				// setLocal("chatList",JSON.stringify(arr))
				if (getLocal("chatList")) {
					this.chatList = JSON.parse(getLocal("chatList"))
				}
			},
			getHistory(id, msg) {
				// console.log(id,msg);
				// let list=[]
				// this.im.query_by_index({
				// 	tableName: 'message',
				// 	indexName: 'msg',
				// 	target: msg,
				// 	success: (res) => {
				// 		console.log("query_by_index", res);
				// 		this.im.query_by_index({
				// 			tableName: 'message',
				// 			indexName: 'seqId',
				// 			target: res.seqId,
				// 			success: (r) => {
				// 				console.log("query_by_index", r);

				// 			}
				// 		})
				// 	}
				// })
				// // 查询表所有数据
				// this.im.queryAll({
				// 	tableName: "message",
				// 	success: (res) => {
				// 		console.log("queryAll", res)
				// 	}
				// });
				const loading = this.$loading({
					lock: true,
					text: '加载中...',
					spinner: 'el-icon-loading',
					target: this.$refs.top
				});
				// let list = []
				// this.im.query_by_index({
				// 	tableName: 'message',
				// 	indexName: 'chatId',
				// 	target: id,
				// 	success: (res) => {
				// 		console.log("query_by_index", res);
				// 		for (let i = 0; i < 10; i++) {
				// 			this.im.query_by_index({
				// 				tableName: 'message',
				// 				indexName: 'id',
				// 				target: res.id + i,
				// 				success: (res) => {
				// 					console.log(res);
				// 					if (res.chatId == id) {
				// 						list.push(res)
				// 					}
				// 					if (i == 9) {
				// 						this.msgList = [...list]
				// 						this.$nextTick(function() {
				// 							this.$refs.top.scrollTop = 999999999;
				// 						});
				// 					}
				// 				}
				// 			})
				// 		}
				// 	}
				// })
				this.im.query({
					tableName: "message",
					condition: (item) => item.chatId == id,
					success: r => {
						console.log("query", r);
						loading.close();
						this.msgList = r
						this.$nextTick(function() {
							this.$refs.top.scrollTop = 999999999;
						});
					}
				});
			},
			selectChat(id, index, msg) {
				this.cur = index
				this.chatId = id
				this.chatList[index].unread = 0
				this.msgList = []
				console.log("发送已读状态");
				this.page = 1
				this.loading = false
				this.cursorGetDataByIndexAndPage(1)
				// this.read()
				// this.getHistory(id, msg)
			},
			updateList(data, str) {
				if (this.chatList.length != 0) {
					if (!Array.isArray(data)) {
						this.im.insert({
							tableName: "message",
							data: data,
							success: () => console.log("添加成功")
						});
						this.chatList.forEach(e => {
							if (e.chatId == data.chatId) {
								e.msg = data.msg
								e.time = data.time
								e.unread = data.unread
								e.seqId = data.seqId
								this.isExist = true
							}
						})
					} else {
						this.im.insert({
							tableName: "message",
							data: data,
							success: () => console.log("添加成功")
						});
						data.forEach(e => {
							this.chatList.forEach(el => {
								if (e.chatId == el.chatId) {
									el.msg = e.msg
									el.time = e.time
									el.unread = e.unread
									el.seqId = e.seqId
									this.isExist = true
								}
							})
						})
					}
				}
				console.log("isExist", this.isExist);
				if (!this.isExist) {
					if (!Array.isArray(data)) {
						this.chatList.unshift(data)
					} else {
						this.chatList.unshift({
							chatId: data[data.length - 1].chatId,
							avatar: data[data.length - 1].avatar,
							time: this.getNewTime(),
							name: data[data.length - 1].name,
							msg: data[data.length - 1].msg,
							from: data[data.length - 1].from,
							unread: data[data.length - 1].unread,
							seqId: data[data.length - 1].seqId
						})
					}
					this.cur++
				} else {
					if (this.msgList.length != 0) {
						if (!Array.isArray(data) && this.chatList[this.cur].chatId == data.chatId) {
							this.msgList.push(data)
						} else if (Array.isArray(data) && this.chatList[this.cur].chatId == data[0].chatId) {
							this.msgList=[...this.msgList,...data]
						}
					}
				}
				this.chatTop(data, str)
				setLocal("chatList", JSON.stringify(this.chatList))
				this.$nextTick(function() {
					this.$refs.top.scrollTop = 999999999;
				});
			},
			sendMsg(data) {
				console.log("发送消息，发送已读状态", data);
				// this.stompClient.send('/app/chat', {}, JSON.stringify(data));
				this.updateList(data, "fa")
			},
			getNewTime() {
				let time = new Date()
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				let hour = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()
				if (hour < 10) hour = "0" + hour
				if (minute < 10) minute = "0" + minute
				if (second < 10) second = "0" + second
				return `${year}/${month}/${date} ${hour}:${minute}:${second}`
			},
			beforeSendMsg() {
				if (this.text.trim() != "") {
					// let data = {
					// 	fromId: "60ffa36592211f3b364d04b9",
					// 	chatId: "dadgawawawawawawfa",
					// 	msgFormat: 'TEXT',
					// 	content: this.text,
					// 	chatMsgType: 'Session'
					// }
					let data = {
						chatId: this.chatId,
						avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/app/avatar/default.png",
						time: this.getNewTime(),
						name: "kf",
						msg: this.text,
						from: "me",
					}
					this.sendMsg(data)
					this.text = ""
				} else {
					alert("发送内容不能为空")
				}
			},
			goLogin() {
				login({
					account: "admin",
					code: "adminadmin"
				}).then(res => {
					console.log(res);
					let loginData = res.data.data
					setLocal("loginData", JSON.stringify(loginData))
				})
			},
			// initDB() {
			// 	this.$Idb(db_config).then(im => {
			// 		this.im = im
			// 	})
			// },
			testInfo() {
				setInterval(() => {
					let data = [{
							chatId: `test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
							avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/avatar/2023216/app-sVEPKqtwrPfh.jpg",
							time: this.getNewTime(),
							name: `demo${this.count++}`,
							msg: [`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
								`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`
							],
							from: "he",
							unread: 0
						},
						{
							chatId: `test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
							avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/avatar/2023216/app-sVEPKqtwrPfh.jpg",
							time: this.getNewTime(),
							name: `demo${this.count++}`,
							msg: `test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
							from: "he",
							unread: 0
						}
					]
					this.ws.send(JSON.stringify(data[Math.round(Math.random())]))
				}, 100)
			},
			//测试
			initWs() {
				const _this = this
				_this.ws = new WebSocket("ws://127.0.0.1:8000");
				_this.ws.onopen = function() {
					console.log('websocket open');
				}
				_this.ws.onmessage = function(e) {
					console.log("================监听到新消息");
					console.log(JSON.parse(e.data));
					_this.isExist = false
					_this.updateList(JSON.parse(e.data), "shou")
				}
				_this.ws.onclose = function() {
					// console.log("掉线，重新连接");
					// _this.initWs()
				}
			},
			// initWs() {
			// 	let socket = new this.$SockJS('/ws');
			// 	// console.log("socket", socket);
			// 	// socket.onmessage = function(e) {
			// 	// 	console.log("socket.onmessage", JSON.stringify(e.data));
			// 	// }
			// 	// socket.onclose = function(e) {
			// 	// 	console.log("断开");
			// 	// 	this.initWs()
			// 	// }
			// 	this.stompClient = this.$Stomp.over(socket);
			// 	// console.log("stompClient", this.stompClient);
			// 	this.stompClient.heartbeat.outgoing = 3000; //前端对后端进行心跳检测的时长 ms
			// 	this.stompClient.heartbeat.incoming = 0; //后端对前端就行心跳检测的时长 ms
			// 	this.stompClient.connect({}, (res) => {
			// 		this.successCallback()
			// 	}, (err) => {
			// 		this.disConnect()
			// 	});
			// },
			disConnect() {
				const _this = this
				_this.stompClient.disconnect(function() {
					console.log("断开连接", _this.stompClient)
				})
			},
			chatTop(data, str) {
				let newList = []
				if (!Array.isArray(data)) {
					this.chatList.forEach((e, i) => {
						if (e.chatId == data.chatId) {
							newList.push(e)
							this.chatList.splice(i, 1)
						}
					})
				} else {
					this.chatList.forEach((e, i) => {
						if (e.chatId == data[0].chatId) {
							newList.push(e)
							this.chatList.splice(i, 1)
						}
					})
				}
				this.chatList = [...newList, ...this.chatList]
				if (str == "fa") {
					this.cur = 0
				}
			},
			stop() {
				clearInterval(this.timer)
			},
			testMessageReceived() {
				this.timer = setInterval(() => {
					this.testMoreChatCome()
				}, 100)
				// this.testMoreChatCome()
			},
			testMoreChatCome() {
				// let data = {
				// 	chatId: `agho1.daopkgw`,
				// 	avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/avatar/2023216/app-sVEPKqtwrPfh.jpg",
				// 	time: this.getNewTime(),
				// 	name: `demo0080`,
				// 	msg:[0,1,0],
				// 	from: "he",
				// 	unread: 0
				// }
				let data = {
					chatId: `test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
					avatar: "https://as-test-cd.oss-cn-chengdu.aliyuncs.com/avatar/2023216/app-sVEPKqtwrPfh.jpg",
					time: this.getNewTime(),
					name: `demo${this.count++}`,
					msg: [`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
						`test${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}${Math.ceil(Math.random() * 9)}`,
					],
					from: "he",
					unread: 0
				}
				console.log("===========收到消息了", data);
				this.isExist = false
				if (Array.isArray(data.msg)) {
					let list = []
					data.msg.forEach(e => {
						let obj = {}
						obj.chatId = data.chatId
						obj.avatar = data.avatar
						obj.name = data.name
						obj.time = data.time
						obj.msg = e
						obj.from = data.from
						obj.unread = data.unread
						list.push(obj)
					})
					this.updateList(list, "shou")
				} else {
					this.updateList(data, "shou")
				}
			},
			messageListener(msg) {
				console.log("=======监听到消息", JSON.parse(msg));
				console.log("判断消息类型，解析消息，存入数据库，更新未读数，更新会话列表");
			},
			successCallback() {
				console.log("开始连接");
				let loginData = JSON.parse(getLocal("loginData"))
				let pin = loginData.pin
				this.stompClient.subscribe('/user/' + pin + '/message', (msg) => {
					this.messageListener(msg)
				});
			},
			getRouter() {
				console.log("router", this.$route.matched);
				this.pathList = this.$route.matched
			},
			get(e) {
				this.$router.push(e)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: goldenrod !important;
	}

	//修改滚动条样式
	.left::-webkit-scrollbar,
	.top::-webkit-scrollbar {
		width: 15px;
	}

	.left::-webkit-scrollbar-thumb,
	.top::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		opacity: 0.2;
		background: wheat;
	}

	.left::-webkit-scrollbar-track,
	.top::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background: white;
	}

	.chat {
		width: 800px;
		height: 400px;
		background-color: #eee;
		box-shadow: 0 0 3px 4px #929ca8;
		display: flex;
		position: relative;
		position: fixed;
		top: 50%;
		left: 50%;
		// margin-left: -400px;
		// margin-top: -200px;
		transform: translate(-50%, -50%);
		z-index: 10000;

		.el-icon-error {
			position: absolute;
			top: -15px;
			right: -10px;
			font-size: 30px;
			cursor: pointer;
		}

		.top {
			height: 200px;
			border-bottom: 1px solid #333;
			overflow: auto;

			.goRight {
				display: flex;
				justify-content: end;
			}

			.msgList {
				display: flex;
				margin-bottom: 10px;

				&>div {
					margin: 0 5px;

					&>div:nth-child(3) {
						color: #333;
						font-size: 12px;
					}

					&>div:nth-child(2) {
						font-size: 12px;
						padding: 5px;
						background-color: #eee;
						max-width: 200px;
						word-wrap: break-word;
						box-sizing: border-box;
					}

					&>div:nth-child(1) {
						font-weight: bold;
						font-size: 14px;
					}
				}
			}
		}

		.down {
			height: 200px;
			position: relative;

			button:hover {
				background-color: greenyellow;
			}

			button {
				background-color: green;
				color: #fff;
				position: absolute;
				right: 10px;
				bottom: 10px;
				border-radius: 5px;
				border: 0;
				padding: 5px 15px;
			}
		}

		.left {
			background-color: #fff;
			width: 300px;
			height: 100%;
			border: 1px solid #333;
			overflow-y: auto;

			.chatList:hover {
				background-color: goldenrod;
			}

			.chatList {
				background-color: #ddd;
				font-size: 12px;
				display: flex;
				position: relative;
				cursor: pointer;
				margin-bottom: 10px;
				position: relative;

				.unread {
					position: absolute;
					top: 0;
					right: 0;
					background-color: red;
					color: #fff;
					padding: 3px;
				}

				&>div:nth-child(2) {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 13px;

					&>div:last-child {
						max-width: 200px;
						white-space: nowrap;
						overflow: hidden; //文本超出隐藏
						text-overflow: ellipsis; //文本超出省略号替代
					}

					&>div:first-child {
						font-weight: bold;
						font-size: 14px;
					}
				}

				&>div:nth-child(1) {
					margin-right: 20px;
				}

				&>div:nth-child(3) {
					position: absolute;
					top: 10px;
					right: 30px;
				}
			}
		}

		.right {
			background-color: #fff;
			width: 500px;
			height: 100%;

		}
	}

	.el-menu-vertical-demo {
		height: 100vh;
		overflow: hidden;
		width: 200px;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>
